<!-- 题目 -->
<template>
  <div class="app-container">
    <el-form ref="form" :model="searchParams" label-width="80px" style="height: 100px; margin: 10px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="试题名称">
            <el-input v-model="searchParams.content"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="筛选时间">
          <el-col :span="4">
            <el-date-picker v-model="searchParams.startDate" align="right" type="date" placeholder="开始日期"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-date-picker v-model="searchParams.endDate" align="right" type="date" placeholder="结束日期"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-form-item>

      </el-row>
    </el-form>
    <el-row :gutter="12">
      <el-col :span="2" :offset="20">
        <el-button type="primary" @click="searchTable()">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="emptySearch()">重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="22">
        <el-button type="primary" @click="addQuesiton">新增</el-button>
        <el-button type="primary" @click="searchTable()">导入</el-button>
        <el-button type="primary" @click="searchTable()">导出</el-button>
      </el-col>
    </el-row>
    <el-col :span="24">
      <el-table :data="tableData" border>
        <el-table-column prop="content" label="题目名" align="center"> </el-table-column>
        <el-table-column prop="quBank.quBankName" label="题库" align="center"> </el-table-column>
        <el-table-column prop="quType" label="题目类型" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.quType === 1" type='primary' disable-transitions>单选题</el-tag>
            <el-tag v-else-if="scope.row.quType === 2" type='primary' disable-transitions>多选题</el-tag>
            <el-tag v-else-if="scope.row.quType === 3" type='primary' disable-transitions>判断题</el-tag>
            <el-tag v-else-if="scope.row.quType === 4" type='primary' disable-transitions>简答题</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="level.setVal" label="难度" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="queryQuDeatil(scope.row.quId)" type="text" size="small">查看</el-button>
            <el-button @click="updateQu(scope.row.quId)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-row>
      <el-col>
        <pagination :pageNum="searchParams.current" :total="searchParams.total" :pageSize="searchParams.size"
          @sizeChange="sizeChange" @currentChange="currentChange"></pagination>
      </el-col>
    </el-row>
    <add-qyestion ref="dialog" :dialogParams="dialogParams" v-if="dialogParams"></add-qyestion>

  </div>
</template>
  
  
<script>
import AddQyestion from "./addQuestion.vue";
import Pagination from '../../components/Pagination/pagination.vue'
import { queryQuAll } from '@/api/question/question'
export default {
  components: { AddQyestion, Pagination },
  name: "questionBank",
  data() {
    return {
      //传递到子组件的参数
      dialogParams: {
        dialogTitle: '',
        buttonFlag: true,
        disabled:false,
      },
      dialogTableVisible: false,
      tableData: [],
      searchParams: {
        content: "",
        startDate: "",
        endDate: "",
        current: 1,//默认第一页
        size: 10,//一页展示10条
        total: 0,
        quBankName: ""
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  computed: {},
  created() {
  },
  mounted() {
    this.queryAll();
  },
  methods: {
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.searchParams.current = val;
      //刷新表格
      this.queryAll();
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.searchParams.size = val;
      //刷新表格
      this.queryAll();
    },

    queryAll() {
      queryQuAll(JSON.stringify(this.getFormParams())).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records;
          this.searchParams.total = res.data.total;
        }

      });
    },
    //获取请求参数
    getFormParams() {
      return this.searchParams;
    },
    //搜索
    searchTable() {
      this.queryAll();
    },
    //重置搜索框
    emptySearch() {
      this.searchParams.content = "";
      this.searchParams.startDate = "";
      this.searchParams.endDate = "";
      this.queryAll();
    },
    //新增试题
    addQuesiton() {
      this.dialogParams.dialogTitle = '新增试题'
      this.dialogParams.disabled = false;
      this.$refs.dialog.show();
    },
    // 题目详情
    queryQuDeatil(quId) {
      this.dialogParams.dialogTitle = '试题详情';
      this.dialogParams.buttonFlag = false;
      this.dialogParams.disabled = true;
      this.dialogParams.quId = quId;
      this.$refs.dialog.show();
    },
    //试题编辑
    updateQu(quId) {
      this.dialogParams.dialogTitle = '试题编辑';
      this.dialogParams.quId = quId;
      this.$refs.dialog.show();
    },
  },
};
</script>>
  
<style>
.box {
  height: calc(100vh - 120px);
  font-size: 14px;
  line-height: 28px;
}

.title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span {
  margin-right: 10px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: hwb(210 95% 5%);
}

.bg-purple {
  border: 0px solid cornflowerblue;
  height: 200px;
}

.app-container {
  height: 100%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}
</style>
  